<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:51:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:12:46
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
-->
<template>


 <div style="position: relative">
   <div style="position: absolute;top:-85px; right: 110px;font-family: 'font1';font-size: 23px;">
     {{title}}
   </div>
   <div class="right_bottom" >

     <!--    <dv-capsule-chart :config="config" style="width:100%;height:260px" />-->
     <div class="items" v-for="(item,index) in data">
       <img v-if="index == 0" src="@/assets/img/切图/控损完成率ICON.png" alt="">
       <img v-if="index == 1" src="@/assets/img/切图/降档生效ICON.png" alt="">
       <img v-if="index == 2" src="@/assets/img/切图/降档受理ICON.png" alt="">
       <img v-if="index == 3" src="@/assets/img/切图/离网ICON.png" alt="">
       <div>{{item.name}}</div>
       <div style="margin-top: 20px">{{item.value}}</div>
     </div>
<!--     <div class="items">-->
<!--       <img src="@/assets/img/切图/降档生效ICON.png" alt="">-->
<!--       <div>-->
<!--         降档(生效)-->
<!--       </div>-->
<!--       <div style="margin-top: 20px">-99</div>-->
<!--     </div>-->
<!--     <div class="items">-->
<!--       <img src="@/assets/img/切图/降档受理ICON.png" alt="">-->
<!--       <div>-->
<!--         降档(受理)-->
<!--       </div>-->
<!--       <div style="margin-top: 20px">-125</div>-->
<!--     </div>-->
<!--     <div class="items">-->
<!--       <img src="@/assets/img/切图/离网ICON.png" alt="">-->
<!--       <div>-->
<!--         离网-->
<!--       </div>-->
<!--       <div style="margin-top: 20px">-345</div>-->
<!--     </div>-->

   </div>
 </div>

</template>

<script>
import { currentGET } from 'api/modules'
export default {
  props:['data','title'],
  data() {
    return {
      gatewayno: '',
      config: {
        showValue: true,
        unit: "次",
        data: []
      },

    };
  },
  created() {
    this.getData()

  },
  computed: {
  },
  mounted() { },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
    getData() {
      this.pageflag = true
      // this.pageflag =false
      currentGET('big7', { gatewayno: this.gatewayno }).then(res => {

        if (!this.timer) {
          console.log('报警排名', res);
        }
        if (res.success) {
          this.config = {
            ...this.config,
            data: res.data
          }
          this.switper()
        } else {
          this.pageflag = false
          this.srcList = []
          this.$Message({
            text: res.msg,
            type: 'warning'
          })
        }
      })
    },
  },
};
</script>
<style lang='scss' scoped>
.right_bottom {
  margin-top: 100px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  align-items:center;
  justify-content: space-between;
  .items {
    img {
      width: 100px;
      height:100px
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

}
</style>